<template>
  <div class="content" style="min-height: 100vh;">
    <HomeHead :type="2" />
    <div class="normalBox">
      <i class="i_line"></i>
      <i class="i_jiao i_j_t_l"></i>
      <i class="i_jiao i_j_t_r"></i>
      <i class="i_jiao i_j_b_l"></i>
      <i class="i_jiao i_j_b_r"></i>
      <div class="title flex_start">
        <img src="../../assets/i_tit_left.png"/>
        <div class="inner">近30分钟能耗(kWh)</div>
        <img src="../../assets/i_tit_right.png"/>
      </div>
      <img class="tit_bott" src="../../assets/tit_bottom.png"/>
      <!--内容开始-->
      <div class="dataBox flex_start flex_wrap">
        <div class="item flex_between" v-for="i in last_30min_energy_consumption">
          <div class="flex_start">
            <img class="i_item" src="../../assets/i_nenghao.png"/>
            <div class="flex_1">
              <div class="_h3">{{i.total.toFixed(2)}}</div>
              <div class="_p">{{i.name}}</div>
            </div>
          </div>
          <div class="flex_start">
            <img class="i_status" :src="require(i.diff >= 0 ? '@/assets/i_sheng.png' : '@/assets/i_jiang.png')"/>
            <div :class="'_p ' + (i.diff >= 0 ? 'f_red' : 'f_green')">{{i.diff.toFixed(2)}}</div>
          </div>
        </div>
      </div>
      <!--内容结束-->
    </div>
    <div class="normalBox">
      <i class="i_line"></i>
      <i class="i_jiao i_j_t_l"></i>
      <i class="i_jiao i_j_t_r"></i>
      <i class="i_jiao i_j_b_l"></i>
      <i class="i_jiao i_j_b_r"></i>
      <div class="title flex_start">
        <img src="../../assets/i_tit_left.png"/>
        <div class="inner">实时能耗(kWh)</div>
        <img src="../../assets/i_tit_right.png"/>
      </div>
      <img class="tit_bott" src="../../assets/tit_bottom.png"/>
      <!--内容开始-->
      <LineMarker id="chart1-1" :list="real_time_electricity_consumption" />
      <!--内容结束-->
    </div>
    <div class="normalBox">
      <i class="i_line"></i>
      <i class="i_jiao i_j_t_l"></i>
      <i class="i_jiao i_j_t_r"></i>
      <i class="i_jiao i_j_b_l"></i>
      <i class="i_jiao i_j_b_r"></i>
      <div class="title flex_start">
        <img src="../../assets/i_tit_left.png"/>
        <div class="inner">近7日能耗(kWh)</div>
        <img src="../../assets/i_tit_right.png"/>
      </div>
      <img class="tit_bott" src="../../assets/tit_bottom.png"/>
      <!--内容开始-->
      <MixChart id="chart2-1" :list="last_7day_energy_consumption" />
      <!--内容结束-->
    </div>
    <div class="normalBox">
      <i class="i_line"></i>
      <i class="i_jiao i_j_t_l"></i>
      <i class="i_jiao i_j_t_r"></i>
      <i class="i_jiao i_j_b_l"></i>
      <i class="i_jiao i_j_b_r"></i>
      <div class="title flex_start">
        <img src="../../assets/i_tit_left.png"/>
        <div class="inner">近30分钟用水(t)</div>
        <img src="../../assets/i_tit_right.png"/>
      </div>
      <img class="tit_bott" src="../../assets/tit_bottom.png"/>
      <!--内容开始-->
      <div class="dataBox flex_start flex_wrap">
        <div class="item flex_between" v-for="i in minute_water_consumption">
          <div class="flex_start">
            <img class="i_item" src="../../assets/i_water.png"/>
            <div class="flex_1">
              <div class="_h3">{{i.total.toFixed(2)}}</div>
              <div class="_p">{{i.name}}</div>
            </div>
          </div>
          <div class="flex_start">
            <img class="i_status" :src="require(i.diff >= 0 ? '@/assets/i_sheng.png' : '@/assets/i_jiang.png')"/>
            <div :class="'_p ' + (i.diff >= 0 ? 'f_red' : 'f_green')">{{i.diff.toFixed(2)}}</div>
          </div>
        </div>
      </div>
      <!--内容结束-->
    </div>
    <div class="normalBox">
      <i class="i_line"></i>
      <i class="i_jiao i_j_t_l"></i>
      <i class="i_jiao i_j_t_r"></i>
      <i class="i_jiao i_j_b_l"></i>
      <i class="i_jiao i_j_b_r"></i>
      <div class="title flex_start">
        <img src="../../assets/i_tit_left.png"/>
        <div class="inner">实时用水(t)</div>
        <img src="../../assets/i_tit_right.png"/>
      </div>
      <img class="tit_bott" src="../../assets/tit_bottom.png"/>
      <LineMarker id="chart1-2" :list="real_time_water_usage" />
    </div>
    <div class="normalBox">
      <i class="i_line"></i>
      <i class="i_jiao i_j_t_l"></i>
      <i class="i_jiao i_j_t_r"></i>
      <i class="i_jiao i_j_b_l"></i>
      <i class="i_jiao i_j_b_r"></i>
      <div class="title flex_start">
        <img src="../../assets/i_tit_left.png"/>
        <div class="inner">近7日用水(t)</div>
        <img src="../../assets/i_tit_right.png"/>
      </div>
      <img class="tit_bott" src="../../assets/tit_bottom.png"/>
      <MixChart id="chart2-2" :list="last_7day_water_consumption" />
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import LineChart from '../../components/LineChart';
import LineMarker from '../../components/LineMarker';
import MixChart from '../../components/MixChart';
import HomeHead from '@/components/HomeHead';
export default {
  components: {LineChart,LineMarker,MixChart,HomeHead},
  data () {
    return {
      dates: [],
      last_30min_energy_consumption: [],
      real_time_electricity_consumption: [],
      last_7day_energy_consumption: [],
      minute_water_consumption: [],
      real_time_water_usage: [],
      last_7day_water_consumption: [],
      topst: {ele: [], water: []},
      topst2: [],
      topst3: [],
    };
  },
  created() {
    let date = new Date()
    this.dates = [
      new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0),
      new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59),
    ]
  },
  mounted () {
    this.get_last_30min_energy_consumption()
    this.get_real_time_electricity_consumption()
    this.get_last_7day_energy_consumption()
    this.query_30_minute_water_consumption()
    this.get_real_time_water_usage()
    this.get_last_7day_water_consumption()
    this.center_topst()
    this.center_topst2()
    this.center_topst3()

    setInterval(() => {
      this.get_last_30min_energy_consumption()
      this.get_real_time_electricity_consumption()
      this.get_last_7day_energy_consumption()
      this.query_30_minute_water_consumption()
      this.get_real_time_water_usage()
      this.get_last_7day_water_consumption()
    }, 60000)
  },
  methods: {
    // 电近30分钟能耗
    get_last_30min_energy_consumption() {
      this.sendReq('/api/datav/fetch_water_electricity_stats/get_last_30min_energy_consumption', 'get', {}, r => {
        this.last_30min_energy_consumption = r
      })
    },
    // 电实时能耗
    get_real_time_electricity_consumption() {
      this.sendReq('/api/datav/fetch_water_electricity_stats/get_real_time_electricity_consumption', 'get', {}, r => {
        this.real_time_electricity_consumption = r
      })
    },
    // 电近七日能耗
    get_last_7day_energy_consumption() {
      this.sendReq('/api/datav/fetch_water_electricity_stats/get_last_7day_energy_consumption', 'get', {}, r => {
        this.last_7day_energy_consumption = r
      })
    },
    // 水近30分钟能耗
    query_30_minute_water_consumption() {
      this.sendReq('/api/datav/fetch_water_electricity_stats/query_30_minute_water_consumption', 'get', {}, r => {
        this.minute_water_consumption = r
      })
    },
    // 水实时能耗
    get_real_time_water_usage() {
      this.sendReq('/api/datav/fetch_water_electricity_stats/get_real_time_water_usage', 'get', {}, r => {
        this.real_time_water_usage = r
      })
    },
    // 水近七日能耗
    get_last_7day_water_consumption() {
      this.sendReq('/api/datav/fetch_water_electricity_stats/get_last_7day_water_consumption', 'get', {}, r => {
        this.last_7day_water_consumption = r
      })
    },
    // 顶部数字区域
    center_topst() {
      this.sendReq('/api/datav/fetch_water_electricity_stats/center_topst', 'get', {
        start_date: parseInt(this.dates[0].getTime() / 1000),
        end_date: parseInt(this.dates[1].getTime() / 1000),
      }, r => {
        this.topst = r
      })
    },
    // 中间部分
    center_topst2() {
      this.sendReq('/api/datav/fetch_water_electricity_stats/center_topst2', 'get', {
        start_date: parseInt(this.dates[0].getTime() / 1000),
        end_date: parseInt(this.dates[1].getTime() / 1000),
      }, r => {
        this.topst2 = r
      })
    },
    // 底部报警统计
    center_topst3() {
      this.sendReq('/api/datav/fetch_water_electricity_stats/center_topst3', 'get', {
        start_date: parseInt(this.dates[0].getTime() / 1000),
        end_date: parseInt(this.dates[1].getTime() / 1000),
      }, r => {
        this.topst3 = r
      })
    },
    initChart() {
      // 获取DOM元素
      const chartDom = this.$refs.chart;
      // 初始化ECharts实例
      const myChart = echarts.init(chartDom);
 
      // 配置图表选项
      const option = {
        color: ['#FF4D40', '#128DEB'],
        tooltip: {
          show: false,
          trigger: 'item'
        },
        title: {
          text: '报警统计',
          left: "22%",//对齐方式居中
          top: "center",//距离顶部
          textStyle: {//文字配置
            color: "#fff",//文字颜色
            fontSize: 12,//字号
            fontWeight:'normal',
            textAlign: "center",
            align: "center"//对齐方式
          }
        },
        legend: {
          x:'60%',
          y:'center',
          align: 'left',
          orient : 'vertical',
          itemGap:12,
          icon: "circle",
          itemWidth:9,
          textStyle:{
            //在rich中给formatter添加个别字体颜色，此处的abc对应formatter中的abc
            rich:{
              a:{
                fontSize:12,
                color:{},
              },
              b:{
                fontSize:14,
                color:'#fff',
              },
            },
          },
          formatter:(name,value) =>{
            let data = option.series[0].data;
            let faultVal;
            for (let i = 0; i < data.length; i++){
                if(data[i].name == name){
                    faultVal = data[i].value;
                }
                let v = faultVal;
                return '{a|' + name + '} \n\n {b| ' + v + '}'
            }
          }
        },
        series: [
          {
            name: '报警统计',
            type: 'pie',
            center: ['30%', '50%'],
            radius: ['38%', '50%'],
            avoidLabelOverlap: false,
            label: {
            show: false,
            },
          emphasis: {
            label: {
              show: false,
              fontSize: 40,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            { value: 12, name: '报警设备' },
            { value: 30, name: '正常设备' }
          ]
          }
        ]
      };
 
      // 使用配置项显示图表
      myChart.setOption(option);
    },
    getList () {
      this.loading = true
      this.page++
      this.sendReq('goods/index', { type: 1, page: this.page }, r => {
        this.list = this.list.concat(r)
        if (r.length == 0) {
          this.finished = true
        }
        this.loading = false
      })
    },
    goCart(id) {
      this.checkLogin(() => {
        this.$router.push({ path: '/cart', query: { goods_id: id } })
      })
    },
  }
};
</script>

<style lang="less" scoped>
.content {
  background:#13244C;
  // background: url(../../assets/reportBg.png) no-repeat center bottom #13244C;
  // background-size: 100% 100%; 
  box-sizing: border-box; 
  padding-bottom: 4vw;
}
.topTab{
  padding:3vw 0;
  .col{
    width:26.8vw;
    height:8vw;
    background: url(../../assets/checkBg.png) no-repeat center center;
    background-size:100% auto; 
    color:#fff;
    font-size:16px;
    margin:0 3vw;
  }
  .cur{
    background: url(../../assets/checkedBg.png) no-repeat center center;
    background-size:100% auto; 
  }
}
.normalBox{
  width:92vw;
  margin:4vw auto 0 auto;
  background: rgba(14, 34, 68, 0.5);
  box-shadow: -4px -4px 12px 0 #1f8dcd40 inset, 4px 4px 12px 0 #1f8dcd33 inset;
  position: relative;
  padding:4vw;
  box-sizing: border-box;
  .title{
    color:#128DEB;
    font-size:18px;
    min-width:40vw;
    padding:1vw 2vw;
    background: linear-gradient(90deg, #12376C 0.06%, #12376c00 100.04%);
    .inner{
      padding:0 3vw;
    }
  }
  .tit_bott{
    display: block;
    width:100%;
    margin:0.5vw auto;
  }
  .i_line{
    display: block;
    position: absolute;
    width:42vw;
    height:3px;
    background: url(../../assets/guang_line.png) no-repeat center center;
    background-size:100% auto; 
    left:50%;
    margin-left:-21vw;
    top:0;
  }
  .i_jiao{
    display: block;
    position: absolute;
    width:1.6vw;
    height:1.6vw;
  }
  .i_j_t_l{
    background: url(../../assets/i_j_t_l.png) no-repeat center center;
    background-size:100% auto; 
    top:0;
    left:0;
  }
  .i_j_t_r{
    background: url(../../assets/i_j_t_r.png) no-repeat center center;
    background-size:100% auto; 
    top:0;
    right:0;
  }
  .i_j_b_l{
    background: url(../../assets/i_j_b_l.png) no-repeat center center;
    background-size:100% auto; 
    bottom:0;
    left:0;
  }
  .i_j_b_r{
    background: url(../../assets/i_j_b_r.png) no-repeat center center;
    background-size:100% auto; 
    bottom:0;
    right:0;
  }
}
.dataBox{
  padding:5px 0 0 0;
  margin-left:-5px;
  .item{
    width:150px;
    background: rgba(25, 52, 88, 0.9);
    padding:10px 5px;
    box-sizing: border-box;
    margin:5px;
    .i_item{
      display: block;
      width:35px;
      margin-right:5px;
    }
    ._h3{
      font-size:16px;
      color:#fff;
      font-weight:600;
    }
    ._p{
      font-size:12px;
      color:rgba(243, 246, 250, 0.6);
    }
    .i_status{
      display: block;
      width:12px;
      margin-right:5px;
    }
  }
}
.recordList{
  margin-top:2vw;
  .col{
    background: rgba(15, 41, 75, 0.9);
    text-align: center;
    color:rgba(255, 255, 255, 0.8);
    font-size:12px;
    padding:3vw 0;
    box-sizing: border-box;
    .item{
      padding:0 3vw;
    }
    .width_14{
      width:14vw;
    }
    .width_20{
      width:20vw;
    }
  }
  .listTit{
    font-size:14px;
    font-weight:bold;
    color:#fff;
  }
  .col:nth-child(odd){
    background: rgba(15, 41, 75, 0);
  }
}
</style>
